<template>
    <h1>个人信息</h1>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="sayHello">说话</button>
    <p style="text-align: left;border-top: 1px solid #000;">
        vue3 不再采用 Vue 方法，而是通过名为 createApp 的工厂函数进行实例化
        <br>
        <br>
        vue2 的配置（data、methods、computed...）中可以访问到 setup 中的属性、方法；
        <br>
        <br>
        但是 setup 中无法访问到 vue2 写法中的配置（若读取会显示 undefined），因为 setup 在生命周期中是最先加载的，此时 vue2 写法中定义的配置还未生效；
        <br>
        <br>
        如果发生重名，则优先以 setup 为主；
        <br>
        <br>
        setup 不能是一个 async 函数，因为返回值是一个Promise，而不是正常return的对象。会导致模板中无法使用返回的对象。
    </p>
</template>

<script lang="ts">

export default {
    name: 'setup1',
    setup() {
        // 数据
        let name = '张三'
        let age = 18

        // 方法
        function sayHello() {
            alert(`我叫${name},我${age} 岁了，你好！`)
        }
        return {
            name,
            age,
            sayHello
        }
    }
} 
</script>
<style></style>